<template>
	<view class="container">
		<!--  搜索 -->
		<view class="search" @click="goSearch">
			<image src="https://community.chuangxiangdianli.com/images/home/search.png" mode=""></image>
			全品类1件85折2件8折 再享5090元优惠礼包
		</view>
		<!--  分类 -->
		<view class="classify">
			<view class="left" @click="changeNav(1)">
				<text :class="navIndex === 1 ? 'active' : ''">商品分类</text>
				<view class="active_bot" v-if="navIndex == 1"></view>
			</view>
			<view class="right" @click="changeNav(2)">
				<text :class="navIndex === 2 ? 'active' : ''">店铺分类</text>
				<view class="active_bot" v-if="navIndex == 2"></view>
			</view>
		</view>
		<!--  分类商品 -->
		<view class="classify_content">
			<view class="classify_title">
				<view v-if="navIndex == 2" class="title_item" :class="tabIndex == index ? 'bg_weight' : ''" v-for="(item, index) in classificationTab" :key="index" @click="clickTab(item, index)">
					<view v-show="tabIndex == index" class="bor_left"></view>
					{{ item.cate_name }}
				</view>
				<view v-if="navIndex == 1" class="title_item" :class="tabIndex == index ? 'bg_weight' : ''" v-for="(item, index) in shopData" :key="index" @click="clickTab(item, index)">
					<view v-show="tabIndex == index" class="bor_left"></view>
					{{ item.name }}
				</view>
			</view>
			<view class="classify_goods1" v-if="navIndex === 1 && shopData[tabIndex]">
				<view class="classItem" v-for="(item, index) in shopData[tabIndex].children">
					<!-- banner -->
					<image class="content_banner" v-if="item.thumb" :src="item.thumb" mode=""></image>
					<!-- title -->
					<view class="content_title">{{ item.name }}</view>
					<!-- 商品单项 -->
					<view class="classify_goods">
						<view class="goods_item" v-if="JSON.stringify(item.children) != '[]'" v-for="(v, n) in item.children" @click="goGoodDetail(v.id)" :key="n">
							<image :src="v.thumb" mode=""></image>
							<view>{{ v.name }}</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 分类店铺 -->
			<view class="classify_store" v-if="navIndex === 2">
				<view class="store_item" v-for="(item, index) in storeList" :key="index" @click="goStore(item.id)">
					<view class="store_img">
						<image class="store_pic" :src="item.store_logo" mode=""></image>
						<!-- <image class="recommend" src="https://community.chuangxiangdianli.com/images/classify/tuijian_icon.png" mode=""></image> -->
					</view>
					<view class="store_msg">
						<view class="store_name">{{ item.store_name }}</view>
						<view class="store_points">
							<image v-for="i in 4" :key="i" src="https://community.chuangxiangdianli.com/images/classify/heart.png" mode=""></image>
							<text>好评率{{ item.comment_rate }}%</text>
						</view>
						<view class="insert"><view @click="GoToStore(item)">点击进入店铺</view></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navIndex: 1, // 商品分类: 1, 店铺分类： 2
			classificationTab: [],
			shopData: [], // 商品分类数据
			tabIndex: 0,
			storeList: [] //店铺列表
		};
	},
	onShow() {
		//  获取商品分类
		this.getClassificationShop()
	},
	methods: {
		// 跳转店铺
		goStore(id) {
			uni.navigateTo({
				url: `/other/store/index?id=${id}`
			})
		},

		// 点击分类标签
		clickTab(item, index) {
			console.log(item, '分类标签');
			this.tabIndex = index;
			// 请求商品
			if (this.navIndex === 1) {
				this.getClassificationShop()
				this.tabIndex = index
			}
			// 请求店铺
			if (this.navIndex === 2) {
				this.getClassificationStore(item.id);
			}
		},

		// 分类商品
		getClassificationShop() {
			var that = this
			this.$mrequest({
				url: 'Mini/goods/goodsClass',
				method: 'GET',
				callBack: function callBack (res) {
					console.log('请求成功', res)
					if (res.status) {
						// that.tabIndex = 0
						that.shopData = res.data
					} else {
						uni.showToast({
							title: '?????',
							icon: 'none'
						})
					}
				},
				fail: function fail (res) {
					// console.log('请求失败')
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		},

		// 分类店铺
		getClassificationStore(id) {
			this.$mrequest2({
				method: 'get',
				url: 'Mini/store/StoreList',
				data: {
					class_id: id
				}
			}).then(res => {
				// this.tabIndex = 0
				this.storeList = res.data.data;
			});
		},

		//  跳转搜索页面
		goSearch() {
			uni.navigateTo({
				url: '/other/home/homeSearch'
			});
		},

		// 选择 商品/店铺 分类、
		changeNav(num) {
			if (num === this.navIndex) return;
			// 清空分类标签
			this.classificationTab = [];
			this.navIndex = num;

			// 商品分类
			if (num === 1) {
				// 请求商品分类名称
			}

			// 店铺分类
			if (num === 2) {
				// 请求店铺分类名称
				this.$mrequest2({
					method: 'get',
					url: 'Mini/store/StoreClass'
				}).then(res => {
					this.classificationTab = res.data.data;
					// 默认第一个
					this.getClassificationStore(res.data.data[0].id);
				});
			}
		},

		// 跳转商品详情
		goGoodDetail(id) {
			uni.navigateTo({
				url: '/other/allCategories/index?id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	border-top: 2rpx solid #f2f2f2;
	box-sizing: border-box;
}
.search {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 70rpx;
	margin: 19rpx 30rpx 45rpx;
	background: #f2f2f2;
	border-radius: 35rpx;
	font-size: 26rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #8b8b8b;
	& > image {
		display: block;
		height: 28rpx;
		width: 28rpx;
		margin: 0 30rpx;
	}
}
.classify {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	height: 111rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	& > view {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 160rpx;
		text-align: center;
		& > view {
			margin-top: 21rpx;
		}
		.active {
			color: #34c39e;
		}
		.active_bot {
			width: 160rpx;
			height: 8rpx;
			background: linear-gradient(-74deg, #70dac4, #3ec4a7);
			box-shadow: 0px 5px 12px 1px rgba(68, 198, 170, 0.3);
		}
	}
}
.classify_content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding-right: 30rpx;
	box-sizing: border-box;
	.classify_title {
		// width: 161rpx;
		width: 187rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #242424;
		line-height: 90rpx;
		background: #fafafa;
		.title_item {
			position: relative;
			text-align: center;
			.bor_left {
				position: absolute;
				left: 5rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 8rpx;
				height: 32rpx;
				background: linear-gradient(-74deg, #70dac4, #3ec4a7);
				box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
				border-radius: 4rpx;
			}
		}
		.bg_weight {
			background: #ffffff;
			font-weight: blod;
		}
	}
	.classify_goods1 {
		flex: 1;
		width: 100%;
		padding-left: 30rpx;
		box-sizing: border-box;
		.content_banner {
			overflow: hidden;
			display: block;
			height: 210rpx;
			width: 520rpx;
			border-radius: 15rpx;
		}
		.content_title {
			font-size: 31rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #242424;
			margin: 38rpx 0;
		}
		.classify_goods {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			.goods_item {
				height: 178rpx;
				width: 25%;
				margin: 20rpx;
				& > image {
					display: block;
					height: 128rpx;
					width: 100%;
				}
				& > view {
					text-align: center;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #242424;
					margin-top: 20rpx;
				}
			}
		}
	}
	.classify_store {
		flex: 1;
		.store_item {
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			width: 100%;
			height: 160rpx;
			.store_img {
				position: relative;
				height: 160rpx;
				width: 154rpx;
				margin: 0 20rpx;
				.store_pic {
					display: block;
					height: 100%;
					width: 100%;
				}
				.recommend {
					position: absolute;
					left: 0;
					top: 0;
					height: 47rpx;
					width: 43rpx;
				}
			}
			.store_msg {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				.store_name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #504d4d;
				}
				.store_points {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					& > image {
						display: block;
						width: 23rpx;
						height: 21rpx;
						margin: 0 5rpx;
					}
					& > text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}
			.insert {
				height: 32rpx;
				& > view {
					float: right;
					width: 127rpx;
					height: 32rpx;
					background: url(https://community.chuangxiangdianli.com/images/classify/goInsert.png);
					background-size: 100%;
					text-align: left;
					font-size: 18rpx;
					line-height: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #ffb466;
				}
			}
		}
	}
}
</style>
